<template>
  <div ref="fftjChart" style="width: 100%;height: 530px;" ></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "appType",
  props:['appTypeListData'],
  data() {
    return {};
  },
  mounted() {
  },
  created(){
    setTimeout(() =>{
      this.initChart();
    },1000)
  },
  watch: {
    appTypeListData: function (newVal, oldVal) {
      this.initChart();
    },
  },
  methods: {
    initChart() {
     let fftjChart = echarts.init(this.$refs.fftjChart);
     let yData = [];

     for (let index = 0; index < this.appTypeListData.length; index++) {
      const element = this.appTypeListData[index];
      yData.push(element.cnt)
     }
     console.log(yData)
      fftjChart.setOption({
        title: {
          text: this.$t('analyze.appClass'),
        //   subtext: "纯属虚构",
          left: "20px",
          top: "20px",
        },
        grid: {
          left: "5%",
          right: "5%",
          top: "5%",
          bottom: "5%",
          containLabel: true,
        },
        tooltip: {
          trigger: "item",
          formatter: function (parms) {
            return (
              parms.marker + " " + parms.name + "：" + parms.value + ""
            );
          },
        },
        xAxis: {
          type: "category", // category(坐标轴类型)
          data: this.appTypeListData.map(item => item.app_type),
          axisTick: {
            // 坐标轴刻度相关配置
            show: false, // 是否显示坐标轴刻度
          },
          axisLine: {
            // 坐标轴轴线相关配置
            lineStyle: {
              // 坐标轴轴线样式
              color: "#000", // 坐标轴轴线颜色
            },
          },
          axisLabel: {
            // 坐标轴刻度标签相关配置
            color: "#000",
            fontSize: 14,
            margin: 20,
          },
        },
        yAxis: {
          type: "value", // value(数值轴,适用于连续数据)
          axisTick: {
            // 坐标轴刻度相关配置
            show: false, // 是否显示坐标轴刻度
          },
          axisLine: {
            // 坐标轴轴线相关配置
            show: false, // 是否显示坐标轴轴线
          },
          axisLabel: {
            // 坐标轴刻度标签相关配置
            color: "#ffffff",
            fontSize: 14,
          },
          splitLine: {
            // 坐标轴在 grid 区域中的分隔线
            lineStyle: {
              // 分割线配置
              color: "rgba(255,255,255,0.15)", // 分割线颜色
            },
          },
        },
        series: [
          // 底部的椭圆形(象形柱图):pictorialBar
          {
            type: "bar", // pictorialBar(象形柱图)
            label: {
              // 图形上的文本标签,可用于说明图像的一些数据信息,比如值,名称等
              show: false, //是否显示标签
              position: ["17", "-0"], // 标签的位置(可以是绝对的像素值或者百分比['50%','50%',也可以是top,left等])
              color: "#01E4FF",
              fontSize: 14,
            },
            encode: {
              itemName: 'app_name',
              value: 'cnt'
            },
            itemStyle: {
              // 图形样式
              // echarts.graphic.LinearGradient(echarts内置的渐变色生成器)
              // 4个参数用于配置渐变色的起止位置,这4个参数依次对应右 下 左 上
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                // 这里 offset: 0 1 ,表示从下往上的渐变色
                {
                  offset: 0, // 0%处的颜色
                  color: "rgba(31,155,255,1)",
                },
                {
                  offset: 1, // 100%处的颜色
                  color: "rgba(0,229,255,1)",
                },
              ]),
            },
            data: yData,
          },
          // 中间的长方形柱状图(柱状图):bar
          {
            type: "bar", // 柱状图
            barGap: "0%", // 柱子与柱子之间的距离
            itemStyle: {
              // 图形样式
              // color支持(rgb(255,255,255)、rgba(255,255,255,1)、#fff,也支持渐变色和纹理填充)
              // 下面就是使用线性渐变
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                type: "linear",
                global: false,
                colorStops: [
                  {
                    offset: 0, // 0%处的颜色
                    color: "rgba(0,229,255,0.5)",
                  },
                  {
                    offset: 1, // 100%处的颜色
                    color: "#1F9BFF",
                  },
                ],
              },
            },
            data: yData,
          },
          
        ],
      });
      window.addEventListener('resize', () => {
        fftjChart.resize();
    })

    },
    
  },
};
</script>

<style>
</style>